<template>
  <div id="setting">
    <navigation index="0" userinfo="https://cn.vuejs.org/images/logo.svg"></navigation>
    <profileHeader mode="1"></profileHeader>
    <div class="setting">
      <div class="setting-header">
        <h1>修改个人信息</h1>
      </div>
      <div class="setting-box">
        <div>
          <p>头像：</p>
          <div class="change-header">
            <img :src="userHeader" alt="">
            <div>
              <svg t="1644220130259" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="11110" width="30" height="30">
                <path
                    d="M512 341.333333c-117.845333 0-213.333333 95.488-213.333333 213.333334s95.488 213.333333 213.333333 213.333333 213.333333-95.488 213.333333-213.333333-95.488-213.333333-213.333333-213.333334z m0-42.666666c141.397333 0 256 114.581333 256 256s-114.602667 256-256 256c-141.418667 0-256-114.581333-256-256s114.581333-256 256-256z m279.616-42.325334h104.448a85.674667 85.674667 0 0 1 85.568 85.269334l1.706667 469.12a84.650667 84.650667 0 0 1-85.077334 85.056l-767.936-1.813334a85.973333 85.973333 0 0 1-85.674666-85.504l-1.685334-466.816a84.928 84.928 0 0 1 84.992-85.312h130.410667c11.861333 0 25.792-8.618667 31.125333-19.221333l34.858667-69.376c10.496-20.906667 38.144-38.08 61.674667-38.186667l276.928-1.344c23.637333-0.128 51.2 16.853333 61.824 37.952l35.904 71.253334c5.290667 10.496 19.114667 18.922667 30.933333 18.922666z m0 42.666667c-27.882667 0-56.469333-17.472-69.034667-42.410667l-35.904-71.253333c-3.349333-6.656-16.128-14.506667-23.509333-14.464l-276.906667 1.344c-7.466667 0.021333-20.48 8.106667-23.786666 14.677333l-34.858667 69.376c-12.586667 25.024-41.237333 42.730667-69.248 42.730667H127.957333c-23.466667 0-42.410667 18.986667-42.325333 42.474667l1.706667 466.837333a43.306667 43.306667 0 0 0 43.093333 42.986667l767.914667 1.813333a41.984 41.984 0 0 0 42.304-42.24l-1.685334-469.12a43.008 43.008 0 0 0-42.88-42.752h-104.469333zM506.666667 714.666667a21.333333 21.333333 0 1 1 0-42.666667c61.866667 0 112-50.133333 112-112a21.333333 21.333333 0 0 1 42.666666 0 154.666667 154.666667 0 0 1-154.666666 154.666667z"
                    fill="#ffffff" p-id="11111"></path>
              </svg>
              <p>点击修改头像</p>
              <input type="file" @change="changeUserHeader($event)" class="change-header">
            </div>
          </div>
        </div>
        <div>
          <p>昵称：</p>
          <p ref="username">{{ username }}</p>
          <input type="text" v-model:value="username" ref="editUsername">
          <div class="edit" @click="editUsername">
            <svg t="1644058280379" class="icon" viewBox="0 0 1240 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="5024" width="20" height="20">
              <path
                  d="M1017.576256 970.610198 26.694901 970.610198c-14.682196 0-26.694901 12.012705-26.694901 26.694901 0 14.682196 12.012705 26.694901 26.694901 26.694901l990.881355 0c14.682196 0 26.694901-12.012705 26.694901-26.694901C1044.271157 982.622904 1032.258451 970.610198 1017.576256 970.610198L1017.576256 970.610198z"
                  p-id="5025" fill="#3981FF"></path>
              <path
                  d="M65.736194 893.695515c2.502647 0 4.838451-0.333686 7.341098-1.001059l164.340484-46.88292c4.337921-1.167902 8.342157-3.503706 11.512176-6.840568l516.37949-516.212647c10.511117-10.344274 10.511117-27.362273 0-37.706548-10.511117-10.511117-27.362273-10.511117-37.706548 0L280.963833 731.357148l-86.758428-86.758428c-3.003176-3.003176-6.673725-5.172137-10.67796-6.340039l436.96216-436.96216c10.511117-10.344274 10.511117-27.362273 0-37.706548-10.511117-10.511117-27.362273-10.511117-37.706548 0L70.407801 675.965229c-4.171078 4.171078-6.840568 9.510058-7.507941 15.349568l-23.524881 172.015268c-1.167902 9.009529 2.168961 17.852215 9.009529 23.858568C53.222959 891.359711 59.396155 893.695515 65.736194 893.695515L65.736194 893.695515zM114.454388 707.331737l35.537587-35.537587c1.334745 3.837392 3.336863 7.507941 6.340039 10.67796l86.758428 86.758428-27.028587 27.028587-118.29178 33.869156L114.454388 707.331737 114.454388 707.331737z"
                  p-id="5026" fill="#3981FF"></path>
              <path
                  d="M778.823735 267.86693c5.172137 4.671608 11.679019 7.007412 18.019058 7.007412 7.174255 0 14.348509-2.836333 19.687489-8.509l94.266369-101.941153c4.838451-5.172137 7.341098-12.179549 7.007412-19.18696-0.333686-7.007412-3.336863-13.681137-8.509-18.519588l-129.47027-119.626525c-10.844804-10.010588-27.69596-9.343215-37.706548 1.501588l-94.099526 101.941153c-10.010588 10.844804-9.343215 27.69596 1.501588 37.706548L778.823735 267.86693 778.823735 267.86693zM763.307324 64.651997l90.262134 83.254722-58.06141 62.733017-90.095291-83.254722L763.307324 64.651997 763.307324 64.651997z"
                  p-id="5027" fill="#3981FF"></path>
              <path
                  d="M1173.741426 720.679188 1212.449033 681.971581 1221.792248 691.314797 1183.084642 730.022403Z"
                  p-id="5028" fill="#3981FF"></path>
              <path
                  d="M1233.771935 679.221723l-7.668361 7.668361-9.320007-9.320007 7.668361-7.668361 9.320007 9.320007Z"
                  p-id="5029" fill="#3981FF"></path>
              <path d="M1173.741426 720.679188 1169.737191 734.026638 1173.741426 720.679188Z" p-id="5030"
                    fill="#3981FF"></path>
              <path d="M1169.737191 734.026638 1183.084642 730.022403 1169.737191 734.026638Z" p-id="5031"
                    fill="#3981FF"></path>
              <path d="M1167.901917 739.031932 1237.976032 739.031932 1167.901917 739.031932Z" p-id="5032"
                    fill="#3981FF"></path>
            </svg>
            <p v-text="editUsernameMode ? '修改':'完成'"></p>
          </div>
        </div>
        <div>
          <p>邮箱：</p>
          <p>{{ email }}</p>
        </div>
        <div>
          <p>修改密码：</p>
          <p v-show="!editPasswordMode" ref="showPwd">**********</p>
          <div v-show="!editPasswordMode" class="edit" @click="editPassword" ref="editPwdIcon">
            <svg t="1644058280379" class="icon" viewBox="0 0 1240 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="5024" width="20" height="20">
              <path
                  d="M1017.576256 970.610198 26.694901 970.610198c-14.682196 0-26.694901 12.012705-26.694901 26.694901 0 14.682196 12.012705 26.694901 26.694901 26.694901l990.881355 0c14.682196 0 26.694901-12.012705 26.694901-26.694901C1044.271157 982.622904 1032.258451 970.610198 1017.576256 970.610198L1017.576256 970.610198z"
                  p-id="5025" fill="#3981FF"></path>
              <path
                  d="M65.736194 893.695515c2.502647 0 4.838451-0.333686 7.341098-1.001059l164.340484-46.88292c4.337921-1.167902 8.342157-3.503706 11.512176-6.840568l516.37949-516.212647c10.511117-10.344274 10.511117-27.362273 0-37.706548-10.511117-10.511117-27.362273-10.511117-37.706548 0L280.963833 731.357148l-86.758428-86.758428c-3.003176-3.003176-6.673725-5.172137-10.67796-6.340039l436.96216-436.96216c10.511117-10.344274 10.511117-27.362273 0-37.706548-10.511117-10.511117-27.362273-10.511117-37.706548 0L70.407801 675.965229c-4.171078 4.171078-6.840568 9.510058-7.507941 15.349568l-23.524881 172.015268c-1.167902 9.009529 2.168961 17.852215 9.009529 23.858568C53.222959 891.359711 59.396155 893.695515 65.736194 893.695515L65.736194 893.695515zM114.454388 707.331737l35.537587-35.537587c1.334745 3.837392 3.336863 7.507941 6.340039 10.67796l86.758428 86.758428-27.028587 27.028587-118.29178 33.869156L114.454388 707.331737 114.454388 707.331737z"
                  p-id="5026" fill="#3981FF"></path>
              <path
                  d="M778.823735 267.86693c5.172137 4.671608 11.679019 7.007412 18.019058 7.007412 7.174255 0 14.348509-2.836333 19.687489-8.509l94.266369-101.941153c4.838451-5.172137 7.341098-12.179549 7.007412-19.18696-0.333686-7.007412-3.336863-13.681137-8.509-18.519588l-129.47027-119.626525c-10.844804-10.010588-27.69596-9.343215-37.706548 1.501588l-94.099526 101.941153c-10.010588 10.844804-9.343215 27.69596 1.501588 37.706548L778.823735 267.86693 778.823735 267.86693zM763.307324 64.651997l90.262134 83.254722-58.06141 62.733017-90.095291-83.254722L763.307324 64.651997 763.307324 64.651997z"
                  p-id="5027" fill="#3981FF"></path>
              <path
                  d="M1173.741426 720.679188 1212.449033 681.971581 1221.792248 691.314797 1183.084642 730.022403Z"
                  p-id="5028" fill="#3981FF"></path>
              <path
                  d="M1233.771935 679.221723l-7.668361 7.668361-9.320007-9.320007 7.668361-7.668361 9.320007 9.320007Z"
                  p-id="5029" fill="#3981FF"></path>
              <path d="M1173.741426 720.679188 1169.737191 734.026638 1173.741426 720.679188Z" p-id="5030"
                    fill="#3981FF"></path>
              <path d="M1169.737191 734.026638 1183.084642 730.022403 1169.737191 734.026638Z" p-id="5031"
                    fill="#3981FF"></path>
              <path d="M1167.901917 739.031932 1237.976032 739.031932 1167.901917 739.031932Z" p-id="5032"
                    fill="#3981FF"></path>
            </svg>
            <p>修改</p>
          </div>
          <div class="edit-password" v-show="editPasswordMode" ref="editPwd">
            <input type="password" placeholder="请输入旧密码" v-model:value="editOldPwd" @input="handleInputOldPwd">

            <div class="edit-old-pwd-success edit-old-pwd" ref="oldPwdSuccess" style="display: none">
              <svg t="1645015123196" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="2097" width="16" height="16">
                <path
                    d="M512 32C246.4 32 32 249.6 32 512s217.6 480 480 480 480-217.6 480-480S774.4 32 512 32z m268.8 380.8L496 697.6c-25.6 25.6-60.8 25.6-83.2 0L243.2 528c-25.6-25.6-25.6-60.8 0-83.2s60.8-25.6 83.2 0l128 128 240-240c25.6-25.6 60.8-25.6 83.2 0 25.6 19.2 25.6 54.4 3.2 80z"
                    p-id="2098" fill="#11aa66"></path>
              </svg>
            </div>
            <div class="edit-old-pwd-error edit-old-pwd" ref="oldPwdError" style="display: none">
              <svg t="1645015193498" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="3789" width="16" height="16">
                <path
                    d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m218.624 672.256c15.872 15.872 15.872 41.984 0 57.856-8.192 8.192-18.432 11.776-29.184 11.776s-20.992-4.096-29.184-11.776L512 569.856l-160.256 160.256c-8.192 8.192-18.432 11.776-29.184 11.776s-20.992-4.096-29.184-11.776c-15.872-15.872-15.872-41.984 0-57.856L454.144 512 293.376 351.744c-15.872-15.872-15.872-41.984 0-57.856 15.872-15.872 41.984-15.872 57.856 0L512 454.144l160.256-160.256c15.872-15.872 41.984-15.872 57.856 0 15.872 15.872 15.872 41.984 0 57.856L569.856 512l160.768 160.256z"
                    fill="#CF3736" p-id="3790"></path>
              </svg>
              <p>{{ oldErrorMsg }}</p>
            </div>

            <input type="password" placeholder="请输入新密码" v-model:value="editNewPwd" @blur="handleBlurPwd"
                   @input="handleInputNewPwd">

            <div class="edit-new-pwd-success edit-new-pwd" ref="newPwdSuccess" style="display: none">
              <svg t="1645015123196" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="2097" width="16" height="16">
                <path
                    d="M512 32C246.4 32 32 249.6 32 512s217.6 480 480 480 480-217.6 480-480S774.4 32 512 32z m268.8 380.8L496 697.6c-25.6 25.6-60.8 25.6-83.2 0L243.2 528c-25.6-25.6-25.6-60.8 0-83.2s60.8-25.6 83.2 0l128 128 240-240c25.6-25.6 60.8-25.6 83.2 0 25.6 19.2 25.6 54.4 3.2 80z"
                    p-id="2098" fill="#11aa66"></path>
              </svg>
            </div>
            <div class="edit-new-pwd-error edit-new-pwd" ref="newPwdError" style="display: none">
              <svg t="1645015193498" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="3789" width="16" height="16">
                <path
                    d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m218.624 672.256c15.872 15.872 15.872 41.984 0 57.856-8.192 8.192-18.432 11.776-29.184 11.776s-20.992-4.096-29.184-11.776L512 569.856l-160.256 160.256c-8.192 8.192-18.432 11.776-29.184 11.776s-20.992-4.096-29.184-11.776c-15.872-15.872-15.872-41.984 0-57.856L454.144 512 293.376 351.744c-15.872-15.872-15.872-41.984 0-57.856 15.872-15.872 41.984-15.872 57.856 0L512 454.144l160.256-160.256c15.872-15.872 41.984-15.872 57.856 0 15.872 15.872 15.872 41.984 0 57.856L569.856 512l160.768 160.256z"
                    fill="#CF3736" p-id="3790"></path>
              </svg>
              <p>{{ newErrorMsg }}</p>
            </div>

            <div class="edit-password-button">
              <button @click="handleCancelEditPwd">取消</button>
              <button @click="handlePushEditPwd">提交</button>
            </div>
          </div>
          <div class="edit-password-success" ref="editPasswordSuccess">
            <svg t="1645015123196" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="2097" width="54" height="54">
              <path
                  d="M512 32C246.4 32 32 249.6 32 512s217.6 480 480 480 480-217.6 480-480S774.4 32 512 32z m268.8 380.8L496 697.6c-25.6 25.6-60.8 25.6-83.2 0L243.2 528c-25.6-25.6-25.6-60.8 0-83.2s60.8-25.6 83.2 0l128 128 240-240c25.6-25.6 60.8-25.6 83.2 0 25.6 19.2 25.6 54.4 3.2 80z"
                  p-id="2098" fill="#11aa66"></path>
            </svg>
            <p>密码已修改成功！</p>
          </div>
        </div>
      </div>
    </div>
    <publicFooter></publicFooter>
  </div>
</template>
<script>
import navigation from "@/components/navigation";
import publicFooter from "@/components/publicFooter";
import profileHeader from "@/components/profileHeader";
import Vue from "vue";
import axios from "axios";
import router from "../../router";

export default {
  name: "index",
  data() {
    return {
      username: "",
      email: "",
      userHeader: "",
      editUsernameMode: 0,
      editPasswordMode: 0,
      editOldPwd: '',
      editNewPwd: '',
      oldErrorMsg: '',
      newErrorMsg: '',
    }
  },
  mounted() {
    this.Request('get', '/v1/user', {}).then(res => {
      this.username = res.data.username
      this.userHeader = res.data.headImg
      this.email = res.data.email
    })
  },
  methods: {
    changeUserHeader: function () {
      let file = document.querySelector('.change-header[type]').files[0];
      const formData = new FormData();
      formData.append('headImg', file);
   //   axios.defaults.baseURL = 'http://119.23.46.241:2203';
      const config = {
        headers: {"Content-Type": "multipart/form-data"}
      };
      axios.post("/v1/headimg", formData, config).then(res => {
        if (res.data.code == "200") {
          let reader = new FileReader();
          let _this = this
          router.go(0)
          reader.onload = function () {
            _this.userHeader = reader.result
          }
          if (file) {
            reader.readAsDataURL(file);
          }
        }
      });
    },
    editUsername: function () {
      if (this.editUsernameMode) {
        this.Request('put', '/v1/user', {
          username: this.username
        }).then(res => {
          router.go(0)
        })
      } else {
        this.$refs.username.style.display = "none"
        this.$refs.editUsername.style.display = "block"
      }
      this.editUsernameMode = !this.editUsernameMode
    },
    editPassword: function () {
      this.editPasswordMode = !this.editPasswordMode
    },
    handleBlurPwd: function () {
      if (!/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/.test(this.editNewPwd)) {
        this.$refs.newPwdError.style.display = 'flex'
        this.newErrorMsg = '请输入包含大小写字母和数字的新密码'
      } else {
        this.$refs.newPwdError.style.display = 'none'
        this.newErrorMsg = ''
      }
    },
    handleCancelEditPwd: function () {
      this.editPasswordMode = false
      this.editOldPwd = ''
      this.editNewPwd = ''
      this.$refs.newPwdError.style.display = 'none'
      this.$refs.newPwdSuccess.style.display = 'none'
      this.$refs.oldPwdError.style.display = 'none'
      this.$refs.oldPwdSuccess.style.display = 'none'
    },
    handlePushEditPwd: function () {
      if (this.editOldPwd == '') {
        this.$refs.oldPwdError.style.display = 'flex'
        this.oldErrorMsg = '请输入旧密码'
      }
      if (this.editNewPwd == '') {
        this.$refs.newPwdError.style.display = 'flex'
        this.newErrorMsg = '请输入新密码'
      }
      if (this.editNewPwd != '' && this.editNewPwd != '' && /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/.test(this.editNewPwd)) {
        this.Request('put', '/v1/user', {
          oldpwd: this.editOldPwd,
          pwd: this.editNewPwd,
        }).then(res => {
          if (res.code == '501') {
            this.$refs.oldPwdError.style.display = 'flex'
            this.oldErrorMsg = res.msg
          }
          if (res.code == '200') {
            this.$refs.editPwd.style.display = 'none'
            this.$refs.editPasswordSuccess.style.display = 'flex'
            this.$refs.editPwdIcon.style.display = 'flex'
            this.$refs.showPwd.style.display = 'block'
            let _this = this
            setTimeout(function () {
              _this.$refs.editPasswordSuccess.style.display = 'none'
            },3000)
          }
        })
      }
    },
    handleInputOldPwd: function () {
      if (this.editOldPwd.length > 0) {
        this.$refs.oldPwdError.style.display = 'none'
        this.oldErrorMsg = ''
      }
    },
    handleInputNewPwd: function () {
      if (this.editNewPwd.length > 0) {
        this.$refs.newPwdError.style.display = 'none'
        this.oldErrorMsg = ''
      }
    }
  },
  components: {
    navigation,
    publicFooter,
    profileHeader
  }
}
</script>

<style lang="less">
#setting {
  .setting {
    width: 1200px;
    margin: 28px auto 206px;
    border-radius: 5px;
    background: #fff;
    padding: 20px;
  }

  .setting .setting-header h1 {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    position: relative;
  }

  .setting .setting-header h1::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 110px;
    height: 2px;
    background: #3981FF;
    border-radius: 5px;
  }

  .setting .setting-box {
    padding: 10px 180px 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
  }

  .setting .setting-box > div {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .setting .setting-box > div > p:first-child {
    width: 150px;
    font-size: 18px;
    font-weight: 400;
    color: #333333;

  }

  .setting .setting-box > div > p:nth-child(2) {
    font-size: 20px;
    font-weight: 400;
    color: #666666;
  }

  .change-header {
    width: 120px;
    height: 120px;
    border: solid #fff 3px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
  }

  .change-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .change-header input {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 130px;
    height: 130px;
    opacity: 0;
  }

  .change-header:hover > div {
    display: flex;
  }

  .change-header div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    gap: 8px;
  }

  .setting .setting-box .edit {
    margin-left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #3981FF;
    cursor: pointer;
  }

  .setting .setting-box > div > input {
    display: none;
    font-size: 20px;
    font-weight: 400;
    color: #666666;
  }

  .setting .setting-box .edit-password {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
  }

  .setting .setting-box .edit-password input {
    text-indent: 10px;
    width: 202px;
    height: 32px;
    line-height: 32px;
    background: #FFFFFF;
    border: 1px solid #3981FF;
    border-radius: 5px;
  }

  .setting .setting-box .edit-password input::placeholder {
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    color: #CECECE;
  }

  .setting .setting-box .edit-password .edit-old-pwd,
  .setting .setting-box .edit-password .edit-new-pwd {
    font-size: 14px;
    font-weight: 400;
    color: #F5222D;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .setting .setting-box .edit-password .edit-old-pwd {
    width: 300px;
    position: absolute;
    top: 8px;
    left: calc(-14px + 230px);
  }

  .setting .setting-box .edit-password .edit-new-pwd {
    width: 300px;
    position: absolute;
    top: calc(24px + 32px + 8px);
    left: calc(-14px + 230px);
  }

  .setting .setting-box .edit-password .edit-password-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .setting .setting-box .edit-password .edit-password-button button {
    width: 75px;
    height: 23px;
    border-radius: 3px;
  }

  .setting .setting-box .edit-password .edit-password-button button:first-child {
    background: #3981FF;
    border: 1px solid #3981FF;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
  }

  .setting .setting-box .edit-password .edit-password-button button:last-child {
    border: 1px solid #3981FF;
    font-size: 14px;
    background: #fff;
    font-weight: 400;
    color: #3981FF;
  }

  .setting .setting-box > div:last-child {
    position: relative;
  }

  .setting .setting-box .edit-password-success {
    position: absolute;
    top: -13px;
    left: 350px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 400;
    color: #11AA66;
    gap: 20px;
  }
}
</style>
